<template>
  <div>
    <el-form ref="ruleFormRef" :model="changeContractForm" label-width="120px" :rules="rules">
      <el-form-item label="项目名称:" required prop="projectId">
        <el-select
          filterable
          :disabled="title == '合同变更详情' || title == '合同变更审批'"
          @change="changeProject"
          v-model="changeContractForm.projectId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in store.state.projectCenter.projectList"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="合同名称:" required prop="contractId">
        <el-select
          filterable
          :disabled="title == '合同变更详情' || title == '合同变更审批'"
          @change="changeContract"
          no-data-text="暂无关联合同"
          v-model="changeContractForm.contractId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in contractList"
            :key="item.id"
            :label="item.contractName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="变更类型:" required prop="changeType">
        <!-- <el-select v-model="changeContractForm.changeType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <selectOptionDick
          :disabled="title == '合同变更详情' || title == '合同变更审批'"
          v-model="changeContractForm.changeType"
          :options="store.state.projectCenter.contratDict.KHGL_HTGL_CHANGE_REQUEST_TYPE"
          @changeValue="changeType"
        ></selectOptionDick>
      </el-form-item>
      <el-form-item label="变更原因:" required prop="changeReason">
        <el-input
          :disabled="title == '合同变更详情' || title == '合同变更审批'"
          v-model="changeContractForm.changeReason"
          :rows="5"
          maxlength="512"
          show-word-limit
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="附件" style="width: 100%">
        <el-upload
          ref="uploadRef"
          action="/fastDfs/file/upload"
          v-model:file-list="data.attachment"
          :limit="3"
          :disabled="title == '合同变更详情' || title == '合同变更审批'"
          :headers="headers"
          :on-success="handleAttachment"
          :on-preview="previewAttachment"
          :on-remove="removeAttachment"
          :on-exceed="handleExceed"
          :on-error="handleError"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import selectOptionDick from '@/views/project/components/selectOptionDick/index.vue'
// import SelectOption from '@/views/project/components/selectOption/index.vue'
import { getContractList } from '@/views/project/api/commom'
import { ElMessage } from 'element-plus'
import { computed, defineComponent, reactive, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { type } from '@/utils/utils'

export default defineComponent({
  components: {
    selectOptionDick,
  },
  props: {
    title: {
      type: String,
    },
  },
  setup() {
    const store = useStore()
    const ruleFormRef = ref()
    const contractList = ref([
      {
        contractName: '',
        id: '',
      },
    ])
    let data = reactive({
      attachment: [],
    })
    const rules = reactive({
      projectId: { required: true, message: '该字段必填' },
      contractId: { required: true, message: '该字段必填' },
      changeType: { required: true, message: '该字段必填' },
      changeReason: { required: true, message: '该字段必填' },
    })
    let changeContractForm = store.state.projectCenter.changeContractForm
    const changeType = (obj) => {
      console.log(obj, 'changeType')
      changeContractForm.changeType = obj.itemValue
      changeContractForm.changeTypeName = obj.itemText
    }
    const changeProject = (obj) => {
      console.log(obj, 'changeProject')
      changeContractForm.contractId = ''
      setTimeout(() => {
        if (contractList.value.length == 0) {
          ElMessage({
            message: '该项目暂无关联合同',
            type: 'warning',
          })
        }
      }, 500)
    }
    const changeContract = (number) => {
      console.log(number, 'changeContract')
    }
    watch(
      () => changeContractForm.projectId,
      () => {
        console.log(changeContractForm.projectId, 'changeContractForm.projectId')
        getContractList(changeContractForm.projectId).then((res) => {
          console.log(res.data.data, 'getContractList')
          contractList.value = res.data.data
        })
      },
      {
        immediate: true,
      }
    )
    const submitForm = async () => {
      return new Promise((resolve, reject) => {
        ruleFormRef.value.validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            resolve('校验成功')
          } else {
            ElMessage({
              message: '请将基本信息补充完整',
              type: 'warning',
            })
            reject('校验失败')
          }
        })
      })
    }

    const handleAttachment = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        let obj = {
          name: uploadFile.data.fileName,
          url: uploadFile.data.path,
        }
        data.attachment.push(obj as never)
        changeContractForm.attachment = JSON.stringify(data.attachment)
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    console.log(changeContractForm.attachment,'changeContractForm.attachment');
    if (type(changeContractForm.attachment)) {
      data.attachment = JSON.parse(changeContractForm.attachment)
    } 
    const handleExceed = () => {
      ElMessage({
        message: '最多上传3个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    const previewAttachment = (file) => {
      console.log('constructionMethod', file);
      
      window.open(file.url)
    }
    const removeAttachment = (file, uploadFiles) => {
      console.log(file, uploadFiles, 'changeContractForm.attachment')
      data.attachment = uploadFiles.map((fileItem) => {
        return {
          name: fileItem.name,
          url: fileItem.url,
        }
      })
      changeContractForm.attachment = JSON.stringify(data.attachment)
    }
    const cookie = () => localStorage.getItem('token')
    return {
      store,
      rules,
      data,
      ruleFormRef,
      contractList,
      changeContractForm,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
      submitForm,
      changeType,
      changeProject,
      changeContract,
      handleAttachment,
      previewAttachment,
      removeAttachment,
      handleExceed,
      handleError,
    }
  },
  beforeUnmount() {
    console.log('beforeUasdasdnmount')
    for (let key in this.changeContractForm) {
      this.changeContractForm[key] = ''
    }
  },
})
</script>

<style scoped>
.el-form-item {
  width: 95%;
}
:deep(.el-upload-list__item.is-success.focusing .el-icon-close-tip) {
  display: none !important;
}
</style>
